Multi-series Chart হলো একটি চার্ট যেখানে একাধিক ডেটা সিরিজ একসাথে প্রদর্শিত হয়। এটি ব্যবহৃত হয় যখন একাধিক ভিন্ন ভিন্ন ডেটা সিরিজের তুলনা করতে হয়, যেমন বিভিন্ন ক্যাটেগরির বা গ্রুপের মধ্যে তুলনা। Multi-series চার্ট সাধারণত Line Chart, Bar Chart, বা Column Chart এর রূপে তৈরি করা হয়।
Highcharts বা Angular সহ যেকোনো প্ল্যাটফর্মে Multi-series Chart তৈরি করার প্রক্রিয়া প্রায় একই। এখানে আমরা একটি সাধারণ Line Chart এর উদাহরণ দিয়ে Multi-series Chart তৈরি করার প্রক্রিয়া দেখাব।
Highcharts একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highcharts দিয়ে Multi-series Line Chart তৈরি করতে আপনি একাধিক ডেটা সিরিজ (series) যোগ করতে পারেন।
প্রথমে, Highcharts ইনস্টল করতে হবে:
npm install highcharts
Highcharts Angular র্যাপার ব্যবহার করার জন্য, আপনাকে Highcharts Angular র্যাপার ইনস্টল করতে হবে:
npm install highcharts-angular
এরপর, আপনার অ্যাপ মডিউলে Highcharts মডিউলটি ইমপোর্ট করতে হবে:
import { HighchartsChartModule } from 'highcharts-angular';
আপনি আপনার app.module.ts ফাইলে এটি যোগ করতে পারেন:
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HighchartsChartModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
এখন, আপনি app.component.ts ফাইলে একটি Multi-series Line Chart তৈরি করতে পারেন। উদাহরণস্বরূপ:
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
Highcharts: typeof Highcharts = Highcharts;
chartOptions: Highcharts.Options = {
chart: {
type: 'line' // Line chart type
},
title: {
text: 'Multi-series Line Chart'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Values'
}
},
series: [
{
name: 'Product A',
data: [5, 8, 3, 4, 7, 2, 9, 3, 6, 10, 4, 5]
},
{
name: 'Product B',
data: [2, 4, 5, 7, 3, 9, 2, 6, 7, 3, 5, 4]
},
{
name: 'Product C',
data: [3, 6, 2, 5, 8, 7, 3, 9, 4, 6, 3, 5]
}
]
};
}
app.component.html ফাইলে Highcharts চার্টটি ডিসপ্লে করার জন্য নিচের কোড ব্যবহার করুন:
<div style="height: 400px;">
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>
'line' বলা হয়েছে, কারণ আমরা একটি লাইন চার্ট তৈরি করতে চাই।Product A, Product B, এবং Product C তিনটি সিরিজ রয়েছে, এবং প্রতিটি সিরিজের জন্য আলাদা ডেটা দেয়া হয়েছে।Highcharts ব্যবহার করে Multi-series Line Chart তৈরি করা খুবই সহজ। একাধিক ডেটা সিরিজ যোগ করে আপনি বিভিন্ন গ্রুপ বা ক্যাটেগরির মধ্যে তুলনা করতে পারেন। Angular অ্যাপ্লিকেশনে Highcharts ইন্টিগ্রেশন করে আপনি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক চার্ট তৈরি করতে পারবেন। Multi-series Chart বিভিন্ন সময়ে বা শর্তে ডেটার বিভিন্ন ধারার তুলনা দেখাতে কার্যকর।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
